<template>
    <div>
        <el-dialog
                v-bind="$attrs"
                v-on="$listeners"
                @open="onOpen"
                @close="onClose"
                :title="title"
                对话框打开后是否可以点击后边灰色区域关闭对话框
                :close-on-click-modal='false'>
            <el-row :gutter="15"><!--:rules="rules"-->
                <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
                    <el-col :span="23">
                        <el-form-item label="学生学号" prop="userName">
                            <el-input v-model="formData.stuId" placeholder="请输入学生学号" :maxlength="50" clearable
                                      prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="23">
                        <el-form-item label="学生姓名" prop="userName">
                            <el-input v-model="formData.stuName" placeholder="请输入学生姓名" :maxlength="50" clearable
                                      prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="23">
                        <el-form-item label="学生年龄" prop="userName">
                            <el-input v-model="formData.stuAge" placeholder="请输入学生年龄" :maxlength="50" clearable
                                      prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="23">
                        <el-form-item label="班级名称" prop="userName">
                            <el-select v-model="formData.classId" placeholder="请输入班级名称"
                                       :maxlength="50"
                                       clearable prefix-icon='el-icon-user-solid'
                                       :style="{width: '100%'}">
                                <el-option  v-for="item in classData"
                                            :key="item.classId"
                                            :label="item.className"
                                            :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="23">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="formData.stuSex" size="medium">
                                <el-radio v-for="(item,index) in sexOptions"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value"><!--{{item.label}}-->
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div slot="footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="handelConfirm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import * as api from "../utils/api";
    export default {
        inheritAttrs: false,
        props: {
            title: String,
        },
        data() {
            return {
                formData:{
                    stuId:'',
                    stuName:"",
                    stuAge:"",
                    classId:'',
                    stuSex:''
                },
                classData:[
                    {classId:1,className:'一班'},
                    {classId:2,className:'一班'},
                    {classId:3,className:'三班'},
                    {classId:4,className:'二班'},
                ],
               /* myClassdata:''*/
                rules: {
                    userName: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '性别不能为空',
                        trigger: 'change'
                    }],
                    birthday: [{
                        required: true,
                        message: '请选择生日',
                        trigger: 'change'
                    }],
                },
                sexOptions: [{
                    "label": "男",
                    "value":"男"
                }, {
                    "label": "女",
                    "value": "女"
                }],
            }
        },
        methods: {
            onOpen() {
                //打开对话框执行
            },
            onClose() {
                //关闭对话框form表单里面的内容执行清除以上字段内容
                this.$refs['elForm'].resetFields()
            },
            close() {
                //手工调用关闭，显示状态为隐藏
                this.$emit('canShu')
            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (valid) {
                        console.log(123454)
                        //点击确定后执行验证并执行方法,执行完毕后调用close()方法
                        /*this.formData.stuAge=parseInt(this.formData.stuAge)*/
                        this.axios({
                            url:api.POST_ADDSTUDATA,
                            method:'post',
                            data:{data:this.formData}
                        }).then(data=>{
                            console.log(7896)
                            /*  if (data.data.state.code===200){*/
                            this.$emit('canS',data.data.data)
                      /*      console.log(this.formData)*/
                            this.$message.success({
                                showClose: true,
                                message: '添加成功',
                                type: 'success'
                            });
                            /*  }*/
                        }).catch(data=>{
                        })
                        this.close()
                    }
                })
            }
        }
    }
/*$refs只在组件渲染完成之后才填充，并且它并非响应式的。它仅仅是一个直接操作子组件的应急方案
* 注意：应当避免在模板或者计算属性中使用$refs 不应该在模板中做数据绑定*/
</script>

<style scoped>

</style>